<template>
    <div id="app">
        <Header v-if="$route.meta.showH"></Header>
        <div class="container" :class="{showH:hasH,showF:hasF,allHas:allHas}">
            <router-view/>
        </div>
        <Footer  v-if="$route.meta.showF"></Footer>
    </div>
</template>

<script>
    import Header from '@/components/header'
    import Footer from '@/components/footer'
    import $ from 'jquery'
    export default {
        name: 'App',
        components:{
            Header,
            Footer
        },
        data(){
          return{}
        },
        computed:{
            hasH:function () {
                if(this.$route.meta.showH && !this.$route.meta.showF) return true;
            },
            hasF:function () {
                if(!this.$route.meta.showH && this.$route.meta.showF) return true;
            },
            allHas:function () {
                if(this.$route.meta.showH && this.$route.meta.showF) return true;
            }
        }
    }
</script>

<style lang="less">
    @import "./assets/iconfont/iconfont.css";
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background: #f6f6f6;
        height:100vh;
    }
    #app{
        height:100%;
    }
    img{
        vertical-align: top;
    }
    ul{
        list-style: none;
    }
    input,textarea,button{
        border: 0;
        outline: none;
    }
    .container{
        height: 100%;
        box-sizing: border-box;
        &>*{
            height: 100%;
        }
    }
    .showH{
        padding-top: 45px;
    }
    .showF{
        padding-bottom: 52px;
    }
    .allHas{
        padding-top: 45px;
        padding-bottom: 52px;
    }
    .flex{
    	display: flex;
    	align-items: center;
    }
    .flex-between{
    	display: flex;
    	align-items: center;
    	justify-content: space-between;
    }
    .flex-around{
    	display: flex;
    	justify-content: space-around;
    	align-items: center;
    }
    .flex-column{
    	display: flex;
    	flex-direction: column;
    	justify-content: center;
    	align-items: center;
    }
</style>
